{% extends "base.html" %}
{% block title %}我的相册{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="/static/jquery/jquery-fullsizable.css" type="text/css"/>
<link rel="stylesheet" href="/static/jquery/jquery-fullsizable-theme.css" type="text/css"/>
<script type="text/javascript" src="/static/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/static/jquery/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="/static/jquery/jquery.fullsizable.js"></script>
<style type="text/css" media="screen">
    #container {
      min-height: 500px;
      width:800px;
      margin:0 auto;
      text-align:center;
      margin-top:100px;
    }

    small {
      font: 400 16px/1.62 Georgia, "Xin Gothic", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif;
      font-size: 14px;
      color: #3D3D3D;
    }

</style>

<script>
    $(function() {
      $('#container a').fullsizable({
        detach_id: 'container'
      });
      $(document).on('fullsizable:opened', function(){
        $("#jquery-fullsizable").swipe({
          swipeLeft: function(){
            $(document).trigger('fullsizable:next')
          },
          swipeRight: function(){
            $(document).trigger('fullsizable:prev')
          },
          swipeUp: function(){
            $(document).trigger('fullsizable:close')
          }
        });
      });
    });
</script>
{% endblock %}
{% block content %}
    <div id="container">
      <a href="http://7xixhp.com1.z0.glb.clouddn.com/al1_big.jpg"><img title="天坛公园" alt="Huoty's album" src="http://7xixhp.com1.z0.glb.clouddn.com/al1_small.jpg"></a>
      <a href="http://7xixhp.com1.z0.glb.clouddn.com/al3_big.jpg"><img title="不慕红花不羡仙，绣绒吐雾舞流鹃" alt="Huoty's album" src="http://7xixhp.com1.z0.glb.clouddn.com/al3_small.jpg"></a>
      <a href="http://7xixhp.com1.z0.glb.clouddn.com/al4_big.jpg"><img title="齐大游泳馆" alt="Huoty's album" src="http://7xixhp.com1.z0.glb.clouddn.com/al4_small.jpg"></a>
      <a href="http://7xixhp.com1.z0.glb.clouddn.com/al6_big.jpg"><img title="中北纪元" alt="Huoty's album" src="http://7xixhp.com1.z0.glb.clouddn.com/al6_small.jpg"></a>
      <a href="http://7xixhp.com1.z0.glb.clouddn.com/al7_big.jpg"><img title="养正毓德，精存自生" alt="Huoty's album" src="http://7xixhp.com1.z0.glb.clouddn.com/al7_small.jpg"></a>
      <a href="http://7xixhp.com1.z0.glb.clouddn.com/al8_big.jpg"><img title="雾里长城" alt="Huoty's album" src="http://7xixhp.com1.z0.glb.clouddn.com/al8_small.jpg"></a>
      <a href="http://7xixhp.com1.z0.glb.clouddn.com/ab1.jpeg"><img title="故土思南" alt="Huoty's album" src="http://7xixhp.com1.z0.glb.clouddn.com/as1.jpg"></a>
      <a href="http://7xixhp.com1.z0.glb.clouddn.com/ab2.jpeg"><img title="我的大学" alt="Huoty's album" src="http://7xixhp.com1.z0.glb.clouddn.com/as2.jpg"></a>
      <a href="http://7xixhp.com1.z0.glb.clouddn.com/ab3.jpeg"><img title="齐白石故居" alt="Huoty's album" src="http://7xixhp.com1.z0.glb.clouddn.com/as3.jpg"></a>
      <a href="http://7xixhp.com1.z0.glb.clouddn.com/ab4.jpeg"><img title="天津之行" alt="Huoty's album" src="http://7xixhp.com1.z0.glb.clouddn.com/as4.jpg"></a>
      <a href="http://7xixhp.com1.z0.glb.clouddn.com/ab5.jpeg"><img title="旭辉向晚" alt="Huoty's album" src="http://7xixhp.com1.z0.glb.clouddn.com/as5.jpg"></a>
      <a href="http://7xixhp.com1.z0.glb.clouddn.com/ab6.jpeg"><img title="云天清河" alt="Huoty's album" src="http://7xixhp.com1.z0.glb.clouddn.com/as6.jpg"></a>
      <a href="http://7xixhp.com1.z0.glb.clouddn.com/ab7.jpeg"><img title="雨后夜色" alt="Huoty's album" src="http://7xixhp.com1.z0.glb.clouddn.com/as7.jpg"></a>
      <a href="http://7xixhp.com1.z0.glb.clouddn.com/ab9.jpeg"><img title="忻州有你" alt="Huoty's album" src="http://7xixhp.com1.z0.glb.clouddn.com/as9.jpg"></a>
    </div>
{% endblock %}
